import logo from './logo.svg';
import './App.css';
import React, { Component,useState } from 'react';
import {CSSTransition} from 'react-transition-group'
import "animate.css"


function MyTransition({visible,children}) {
  return <CSSTransition appear mountOnEnter in={visible} timeout={800} classNames={{
    exitActive:"animate__fadeOutLeft",
    exitDone:'exit-done',
    enterActive:"animate__fadeInRight",
    appear:'animate__fadeInRight'
  }}>
  {children}
  </CSSTransition>
}

function Comp1({visible}) {
  return <h1 className="title animate__animated animate__faster">組件1</h1>


}
function Comp2({visible}) {
  return <h1 className="title animate__animated animate__faster">組件2</h1>
}

function App() {
  const [showComp1, setshowComp1] = useState(true);
  return (
    <div className="container">
      <div className="compContainer">
          <MyTransition visible={showComp1}>
            <Comp1/>
        </MyTransition>
        <MyTransition visible={!showComp1}>
            <Comp2/>
        </MyTransition>
      </div>
     
      <button onClick={()=>{
        setshowComp1(!showComp1)
      }}>切换显示状态 </button>

    </div>
   
  );
  
  
}

export default App;
